<template>
  <div class="acManageBox">
    <acManageTitle>
      <template #right>
        <span class="rightName">活动管理页面</span>
      </template>
    </acManageTitle>
    <div class="acManageBottom">
      <div class="acManageLeft">
        <acManageNav></acManageNav>
      </div>
      <div class="acManageRight">
        <acManageCharts></acManageCharts>
        <acManageList></acManageList>
      </div>
    </div>
  </div>
</template>
<script>
import acManageTitle from '@/components/acManageTitle.vue'
import acManageNav from '@/components/acManageNav.vue'
import acManageCharts from '@/components/acManageCharts.vue'
import acManageList from '@/components/acManageList.vue'
export default {
  components: {
    acManageTitle: acManageTitle,
    acManageNav: acManageNav,
    acManageCharts: acManageCharts,
    acManageList: acManageList
  }
}
</script>
<style lang="less" scoped>
.acManageBox {
  height: 100vh;
  width: 100vw;
  background: url("@/assets/image/acManbg.png") no-repeat center center;
  background-size: contain;
  background-position: center;
  background-color: rgba(128, 1, 1, 1);
  .acManageBottom {
    display: flex;
    .acManageLeft {
      width: 14vw;
      flex: 1;
    }
    .acManageRight {
      width: 82vw;
      flex: 4;
      display: flex;
      flex-direction: column;
    }
  }
}
.rightName {
  font-size: 0.52rem;
  color: #fbb40a;
}
</style>
